document.addEventListener('DOMContentLoaded', function() {
  // 获取容器元素
  var coursesContainer = document.querySelector('.space-y-4');

  // 保存原始卡片模板
  var originalCard = coursesContainer.querySelector('.bg-white');
  originalCard.style.display = 'none'; // 隐藏模板卡片

  $.ajax({
    url: 'http://localhost:8080/SelectCourseCenterServlet',
    type: 'GET',
    dataType: 'json',
    success: function(resp) {
      // 1. 获取所有课程列表
      var courses = resp.courses;

      // 清空容器（保留模板）
      coursesContainer.innerHTML = '';
      coursesContainer.appendChild(originalCard);

      courses.forEach(course => {
        // 克隆模板卡片
        var newCard = originalCard.cloneNode(true);
        newCard.style.display = ''; // 显示新卡片

        // 获取新卡片中的元素
        var ClassName = newCard.querySelector('#className');
        var ClassType = newCard.querySelector('#classType');
        var TeacherName = newCard.querySelector('#teacherName');
        var Academy = newCard.querySelector('#academy');
        var Credits = newCard.querySelector('#Credits');
        var Time = newCard.querySelector('#time');
        var Address = newCard.querySelector('#address');
        var ClassContent = newCard.querySelector('#classContent');

        // 填充数据
        ClassName.textContent = course.className;
        ClassType.textContent = course.classType;
        TeacherName.textContent = course.teacherName;
        Academy.textContent = course.academy;
        Credits.textContent = course.credits + '学分'; // 添加"学分"单位
        Time.textContent = course.time;
        Address.textContent = course.address;
        ClassContent.textContent = course.classContent;

        // 将新卡片添加到容器
        coursesContainer.appendChild(newCard);

        console.log("已添加课程卡片：" + course.className);
      });
    },
    error: function(xhr, status, error) {
      alert("数据加载失败");
      console.error('数据加载失败:', error);
    }
  });
});

//查找，筛选
var selectButton = document.getElementById('selectButton')
selectButton.addEventListener('click',function () {


  //获取用户选定的条件
  var selectClassTypeValue = document.getElementById('classTypes').value
  var selectAcademysValue = document.getElementById('academys').value
  var selectTimeValue = document.getElementById('times').value
  alert(selectClassTypeValue)
  alert(selectAcademysValue)
  alert(selectTimeValue)


  //将条件传给后端
  $.ajax({
    url: 'http://localhost:8080/FindCourse',
    type: 'GET',
    // 发送到后端的数据
    data: {
      selectClass : selectClassTypeValue,
      selectAcademy : selectAcademysValue,
      selectTime : selectTimeValue
    },
    dataType: 'json',
    success: function(resp) {


    },
    error: function(xhr, status, error) {
      alert("数据加载失败");
      console.error('数据加载失败:', error);
    }
  });


})

// 导航栏滚动效果
window.addEventListener('scroll', function() {
  const navbar = document.getElementById('navbar');
  if (window.scrollY > 20) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

// 用户菜单切换
const userMenuBtn = document.getElementById('userMenuBtn');
const userMenu = document.getElementById('userMenu');

userMenuBtn.addEventListener('click', function() {
  userMenu.classList.toggle('hidden');
});

// 移动端菜单切换
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');

mobileMenuBtn.addEventListener('click', function() {
  mobileMenu.classList.toggle('hidden');
});

// 点击页面其他地方关闭下拉菜单
document.addEventListener('click', function(event) {
  if (!userMenuBtn.contains(event.target) && !userMenu.contains(event.target)) {
    userMenu.classList.add('hidden');
  }
  
  if (!mobileMenuBtn.contains(event.target) && !mobileMenu.contains(event.target)) {
    mobileMenu.classList.add('hidden');
  }
});

// 选课功能
const selectCourseBtns = document.querySelectorAll('.select-course-btn');
const confirmModal = document.getElementById('confirmModal');
const successSelectModal = document.getElementById('successSelectModal');
const cancelSelectBtn = document.getElementById('cancelSelectBtn');
const confirmSelectBtn = document.getElementById('confirmSelectBtn');
const closeSuccessSelectBtn = document.getElementById('closeSuccessSelectBtn');
const confirmCourseName = document.getElementById('confirmCourseName');
const successCourseName = document.getElementById('successCourseName');

let selectedCourseName = '';

selectCourseBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    const courseCard = this.closest('.card-hover');
    const courseName = courseCard.querySelector('h3').textContent;
    selectedCourseName = courseName;
    
    // 更新模态框中的课程名称
    confirmCourseName.textContent = `您确定要选择《${courseName}》这门课程吗？`;
    
    // 显示确认模态框
    confirmModal.classList.remove('hidden');
  });
});

cancelSelectBtn.addEventListener('click', function() {
  confirmModal.classList.add('hidden');
});

confirmSelectBtn.addEventListener('click', function() {
  confirmModal.classList.add('hidden');
  successSelectModal.classList.remove('hidden');
  successCourseName.textContent = `《${selectedCourseName}》`;
});





